<h1 mat-dialog-title>
  <span class="title">{{ 'APP.OIDC.CLIENTSECRET' | translate }}</span>
</h1>
<div mat-dialog-content>
  <p class="desc cnsl-secondary-text">{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}</p>

  <div class="flex" *ngIf="data.clientId">
    <span class="overflow-auto" data-e2e="client-id"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
    <button
      color="primary"
      [disabled]="copied === data.clientId"
      matTooltip="copy to clipboard"
      cnslCopyToClipboard
      [valueToCopy]="data.clientId"
      (copiedValue)="copied = $event"
      mat-icon-button
      data-e2e="client-id-copy"
    >
      <i *ngIf="copied !== data.clientId" class="las la-clipboard"></i>
      <i *ngIf="copied === data.clientId" class="las la-clipboard-check"></i>
    </button>
  </div>

  <div *ngIf="data.clientSecret; else showNoSecretInfo" class="flex">
    <span class="overflow-auto"><span class="desc cnsl-secondary-text">ClientSecret:</span> {{ data.clientSecret }}</span>
    <button
      color="primary"
      [disabled]="copied === data.clientSecret"
      matTooltip="copy to clipboard"
      cnslCopyToClipboard
      [valueToCopy]="data.clientSecret"
      (copiedValue)="copied = $event"
      mat-icon-button
    >
      <i *ngIf="copied !== data.clientSecret" class="las la-clipboard"></i>
      <i *ngIf="copied === data.clientSecret" class="las la-clipboard-check"></i>
    </button>
  </div>

  <ng-template #showNoSecretInfo>
    <cnsl-info-section>{{ 'APP.OIDC.CLIENTSECRET_NOSECRET' | translate }}</cnsl-info-section>
  </ng-template>
</div>
<div mat-dialog-actions class="action">
  <button
    cdkFocusInitial
    color="primary"
    mat-raised-button
    class="ok-button"
    (click)="closeDialog()"
    data-e2e="close-dialog"
  >
    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
</div>
